<template>
    <div id="serve-execution-monitor">
        <div class="head">
            <h1 class="title">服 务 执 行 监 控</h1>
        </div>
        <div class="content flow-path-box">
            <el-card>
                <h3 class="title">
                    <i class="circle-icon"></i>
                    <span>上游连接状态</span>
                    <div class="legend">
                        <div class="legend-box">
                            <div class="line">
                                <img :src="imgUrl" class="con-5 arrows2" alt="" />
                                <div class="legend-text">连接正常</div>
                            </div>
                            <div class="line line-err" style="left:145px">
                                <div class="arrows2"></div>
                                <div class="legend-text2">连接异常</div>
                            </div>
                        </div>
                    </div>
                    <div class="title-right">
                        <el-tooltip content="查看历史记录" placement="bottom" effect="light" popper-class="monitor-tooltip">
                            <i class="el-icon-tickets" @click="historyVisible = true"></i>
                        </el-tooltip>
                        <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                            <i class="el-icon-refresh-right" @click="getUpstreamData"></i>
                        </el-tooltip>
                    </div>
                </h3>
                <!-- <div style="height:calc(100% - 25px)">
                    <StepChart></StepChart>
                </div> -->
                <div class="flow-path-img">
                    <div class="flex-2">
                        <div class="flex-row-50">
                            <img src="./images/u1784.png" class="shangjiaosuo" alt="" />
                            <div id="u1100_state0">
                                <div id="u1101">
                                    <img id="u1101_img" class="img" src="./images/u12.svg" alt="" />
                                    <div id="u1101_text" class="text"></div>
                                </div>
                                <div id="u1102">
                                    <div id="u1102_div"></div>
                                    <div id="u1102_text">上交所 <br />（行情文件）</div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-row-50">
                            <img src="./images/u1920.png" class="shengjiaosuo" alt="" />
                            <div id="u1100_state0">
                                <div id="u1101">
                                    <img id="u1101_img" class="img" src="./images/u12.svg" alt="" />
                                    <div id="u1101_text" class="text"></div>
                                </div>
                                <div id="u1102">
                                    <div id="u1102_div"></div>
                                    <div id="u1102_text">深交所 <br />（行情接口）</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1">
                        <div class="flex-row-25"></div>
                        <!-- 上交所（行情文件） 正常 -->
                        <div v-if="stateMsg.shangjiaosuo" class="flex-row-25 line-box-1">
                            <div class="line">
                                <img :src="imgUrl" class="con-6 arrows2" alt="" />
                            </div>
                        </div>
                        <!-- 上交所（行情文件） 异常 -->
                        <div v-if="!stateMsg.shangjiaosuo" class="flex-row-25 line-box-1">
                            <div class="line line-err">
                                <div class="arrows2"></div>
                            </div>
                        </div>
                        <!-- 深交所（行情接口） 正常 -->
                        <div v-if="stateMsg.shengjiaosuo" class="flex-row-25 line-box-2">
                            <div class="line">
                                <img :src="imgUrl" class="con-6 arrows2" alt="" />
                            </div>
                        </div>
                        <!-- 深交所（行情接口） 异常 -->
                        <div v-if="!stateMsg.shengjiaosuo" class="flex-row-25 line-box-2">
                            <div class="line line-err">
                                <div class="arrows2"></div>
                            </div>
                        </div>
                        <div class="flex-row-25"></div>
                    </div>
                    <div class="flex-2">
                        <div class="flex-row-100" style="margin-left:-80px">
                            <img src="./images/u86.gif" class="gif-size" alt="" />
                            <div id="u1100_state0">
                                <div id="u1101">
                                    <img id="u1101_img" class="img" src="./images/u12.svg" alt="" />
                                    <div id="u1101_text" class="text"></div>
                                </div>
                                <div id="u1102">
                                    <div id="u1102_div"></div>
                                    <div id="u1102_text">行情网关 <br />（行情数据）</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-1">
                        <!-- 行情网关（行情数据） 正常 -->
                        <div v-if="stateMsg.HQ" class="flex-row-100 line-box-3">
                            <div class="line">
                                <img :src="imgUrl" class="con-3 arrows2" alt="" />
                            </div>
                        </div>
                        <!-- 行情网关（行情数据） 异常 -->
                        <div v-if="!stateMsg.HQ" class="flex-row-100 line-box-3">
                            <div class="line line-err">
                                <div class="arrows2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-2">
                        <div class="flex-row-100" style="flex-direction:column;margin-left:-120px">
                            <div id="u1100_state0">
                                <div id="u1101" style="left: 56px;top: 33px;">
                                    <img id="u1101_img2" class="img" src="./images/u12.svg" alt="" />
                                    <div id="u1101_text" class="text"></div>
                                </div>
                                <div id="u1102">
                                    <div id="u1102_div1"></div>
                                    <div id="u1102_text">风控系统</div>
                                </div>
                            </div>
                            <img src="./images/u860.gif" style="width:160px; height:160px" alt="" />
                        </div>
                    </div>
                    <div class="flex-1">
                        <!-- 财汇系统（资讯数据） 正常 -->
                        <div v-if="stateMsg.CH" class="flex-row-33 line-box-4">
                            <div class="line">
                                <img :src="imgUrl" class="con-4 arrows2" alt="" />
                            </div>
                        </div>
                        <!-- 财汇系统（资讯数据） 异常 -->
                        <div v-if="!stateMsg.CH" class="flex-row-33 line-box-4">
                            <div class="line line-err">
                                <div class="arrows2"></div>
                            </div>
                        </div>
                        <!-- O32系统（投资数据） 正常 -->
                        <div v-if="stateMsg.HS" class="flex-row-33 line-box-5">
                            <div class="line">
                                <img :src="imgUrl" class="con-4 arrows2" alt="" />
                            </div>
                        </div>
                        <!-- O32系统（投资数据） 异常 -->
                        <div v-if="!stateMsg.HS" class="flex-row-33 line-box-5">
                            <div class="line line-err">
                                <div class="arrows2"></div>
                            </div>
                        </div>
                        <!-- 估值系统（估值数据） 正常 -->
                        <div v-if="stateMsg.GZ" class="flex-row-33 line-box-6">
                            <div class="line">
                                <img :src="imgUrl" class="con-4 arrows2" alt="" />
                            </div>
                        </div>
                        <!-- 估值系统（估值数据） 异常 -->
                        <div v-if="!stateMsg.GZ" class="flex-row-33 line-box-6">
                            <div class="line line-err">
                                <div class="arrows2"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-2">
                        <div class="flex-row-33" style="margin-left: -190px;">
                            <img src="./images/u16.gif" class="gif-size" alt="" />
                            <div id="u1100_state0">
                                <div id="u1101">
                                    <img id="u1101_img" class="img" src="./images/u12.svg" alt="" />
                                    <div id="u1101_text" class="text"></div>
                                </div>
                                <div id="u1102">
                                    <div id="u1102_div"></div>
                                    <div id="u1102_text">财汇系统 <br />（资讯数据）</div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-row-33" style="margin-left: -190px;">
                            <img src="./images/u835.gif" class="gif-size" alt="" />
                            <div id="u1100_state0">
                                <div id="u1101">
                                    <img id="u1101_img" class="img" src="./images/u12.svg" alt="" />
                                    <div id="u1101_text" class="text"></div>
                                </div>
                                <div id="u1102">
                                    <div id="u1102_div"></div>
                                    <div id="u1102_text">O32系统 <br />（投资数据）</div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-row-33" style="margin-left: -190px;">
                            <img src="./images/u830.gif" class="gif-size" alt="" />
                            <div id="u1100_state0">
                                <div id="u1101">
                                    <img id="u1101_img" class="img" src="./images/u12.svg" alt="" />
                                    <div id="u1101_text" class="text"></div>
                                </div>
                                <div id="u1102">
                                    <div id="u1102_div"></div>
                                    <div id="u1102_text">估值系统 <br />（估值数据）</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- <div class="flex-2">
                        <div class="flex-row-50">
                            <div style="padding-left: 50px;float:right;position: relative;">
                                <div class="line7">
                                    <img :src="imgUrl" class="con arrows2" alt="" />
                                </div>
                                <div class="text-style">连接正常</div>
                            </div>
                        </div>
                        <div class="flex-row-50">
                            <div style="padding-left: 50px;float:right;position: relative;">
                                <div class="line7 line-err">
                                    <div class="arrows2"></div>
                                </div>
                                <div class="text-style">连接异常</div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </el-card>
        </div>
        <div class="content" style="height:calc(100% - 310px);min-height:550px">
            <el-card>
                <EngineMonitor></EngineMonitor>
            </el-card>
        </div>

        <!-- 上游连接状态历史记录 -->
        <UpstreamHistory v-if="historyVisible" :historyVisible="historyVisible" @close="historyVisible = false"></UpstreamHistory>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
import EngineMonitor from './serve-execution-monitor/engine-monitor.vue';
import StepChart from './serve-execution-monitor/step-chart.vue';
import UpstreamHistory from './serve-execution-monitor/upstream-history.vue';
@Component({
    name: 'ServeExecutionMonitor',
    components: { EngineMonitor, StepChart, UpstreamHistory },
})
export default class ServeExecutionMonitor extends Vue {
    imgUrl: string =
        '';

    private stateMsg: any = { shangjiaosuo: false, shengjiaosuo: false, CH: false, HS: false, HQ: false, GZ: false };

    private historyVisible: boolean = false;
    private pollingTimer: any = null;

    mounted() {
        this.getUpstreamData();
        this.pollingTimer = setInterval(() => {
            this.getUpstreamData('autoRefresh');
        }, 60000);
    }

    beforeDestroy() {
        if (this.pollingTimer) {
            clearInterval(this.pollingTimer);
            this.pollingTimer = null;
        }
    }

    // 获取上游连接状态 operateType:操作类型,
    private getUpstreamData(operateType?: string): void {
        this.$axios({ method: 'get', url: '/devopsmr/upstream/status', headers: { operateType: operateType } }).then((res: any) => {
            let result = { shangjiaosuo: false, shengjiaosuo: false, CH: false, HS: false, HQ: false, GZ: false };
            if (res && res.length) {
                res.forEach(element => {
                    result[element.upstreamCode] = element.newStatus === '0';
                });
            }
            this.stateMsg = result;
        });
    }
}
</script>

<style lang="scss" scoped>
@import '../../assets/style/serve-execution-monitor.scss';
#serve-execution-monitor {
    .head {
        width: 100%;
        height: 60px;
        background-image: url('./images/title.png');
        background-size: 100%;

        .title {
            font-size: 24px;
            font-weight: 600;
            color: #107fff;
            line-height: 33px;
            letter-spacing: 20px;
            text-align: center;
            height: 100%;
            line-height: 60px;
        }
    }
}
</style>
<style>
.el-tooltip__popper {
    margin: 5px !important;
}

.monitor-tooltip {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.65);
    border-width: 0px;
    padding: 5px 10px;
}

.monitor-tooltip .popper__arrow {
    display: none;
}
</style>
